<template>
  <div class="hot-podcast">
    <!-- 标签页 -->
    <van-tabs v-model="active" class="menu-tabs">
      <van-tab
        title="热门博客"
        title-style="color:Gray;font-size:18px"
        title-active-color="#144a9e"
        color="#F8F8FF"
      >
        <SingerIntro :singeid="id" />
      </van-tab>
      <van-tab
        title="有声书"
        title-style="color:Gray;font-size:18px;"
        title-active-color="#144a9e;"
        color="#F8F8FF"
      >
        <SingerSong :singeid="id" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import SingerIntro from "./components/SingerIntro.vue";
import SingerSong from "./components/SingerSong.vue";
export default {
  data() {
    return {
      active: 1,
      id: this.$route.params.id,
    };
  },
  methods: {
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
  },
  components: {
    SingerIntro,
    SingerSong,
  },
};
</script>

<style scoped>
.hot-podcast {
  margin-top: 15px;
}
/* 标签栏样式 */
.menu-tabs .van-tab--active {
  color: #ffffff; /* 字体颜色 */
  background-color: #ff8917; /* 标签背景颜色 */
  border-radius: 40px; /* 圆角标签背景 */
}
</style>